<template>
  <div class="tab-info">
    <section class="section">
      <div class="sec-header">
        待出库产品
      </div>
      <flexbox
        align="center"
        justify="flex-end">
        <el-button
          v-if="detailData.state == 3 && outboundSaveAuth"
          type="primary"
          size="mini"
          class="xr-btn--orange"
          @click="handleToCreate">
          出库
        </el-button>
      </flexbox>

      <tab-table
        v-if="showAwaitTable"
        :request-config="awaitRequestConfig"
        :height="0"
        :max-height="300"
        class="sec-body table-list" />
    </section>

    <section class="section">
      <div class="sec-header">
        出库记录
      </div>

      <div
        v-empty="productData.length === 0"
        class="sec-body">
        <div
          v-for="(item, index) in productData"
          :key="index"
          class="order-item">
          <flexbox class="sec-desc">
            <flexbox-item class="sec-desc-lf">
              <span class="desc-item">
                出库单号：
                <span
                  class="can-visit--underline"
                  @click="handleShowOutDetail(item)">
                  {{ item.orderNumber || '--' }}
                </span>
              </span>
              <span class="desc-item">出库仓：{{ item.warehouseId.warehouseName || '--' }}</span>
              <span class="desc-item">出库时间：{{ item.outboundTime | formatTime }}</span>
              <span class="desc-item">负责人：{{ item.ownerUserId || '--' }}</span>
            </flexbox-item>
            <el-button
              v-if="outboundSetStateAuth"
              type="primary"
              size="mini"
              class="xr-btn--orange"
              @click="handleInvalid(item)">
              作废
            </el-button>
          </flexbox>

          <el-table
            :data="item.list"
            :max-height="300"
            border
            style="width: 100%;">
            <template v-for="(field, c_index) in enterFieldList">
              <el-table-column
                :key="c_index"
                :prop="field.fieldName"
                :label="field.name"
                :formatter="valueFormatter"
                show-overflow-tooltip />
            </template>
          </el-table>
          <div class="order-item-desc">
            备注: {{ item.remark }}
          </div>
        </div>
      </div>
    </section>

    <section class="section">
      <div class="sec-header">
        已作废记录
      </div>

      <div
        v-empty="deleteProductData.length === 0"
        class="sec-body">
        <div
          v-for="(item, index) in deleteProductData"
          :key="index"
          class="order-item">
          <flexbox class="sec-desc">
            <flexbox-item class="sec-desc-lf">
              <span class="desc-item">
                出库单号：
                <span
                  class="can-visit--underline"
                  @click="handleShowOutDetail(item)">
                  {{ item.orderNumber || '--' }}
                </span>
              </span>
              <span class="desc-item">出库仓：{{ item.warehouseId.warehouseName || '--' }}</span>
              <span class="desc-item">出库时间：{{ item.outboundTime | formatTime }}</span>
              <span class="desc-item">负责人：{{ item.ownerUserId || '--' }}</span>
            </flexbox-item>
          </flexbox>

          <el-table
            :data="item.list"
            :max-height="300"
            border
            style="width: 100%;">
            <template v-for="(field, c_index) in enterFieldList">
              <el-table-column
                :key="c_index"
                :prop="field.fieldName"
                :label="field.name"
                :formatter="valueFormatter"
                show-overflow-tooltip />
            </template>
          </el-table>
          <div class="order-item-desc">
            备注: {{ item.remark }}
          </div>
        </div>
      </div>
    </section>

    <j-x-c-full-screen-detail
      v-if="showDetail && rowId && detailType"
      :id="rowId"
      :type="detailType"
      @update="handleUpdate"
      @close="showDetail = false" />

    <create-com
      v-if="showCreate"
      :config="createConfig"
      type="jxc_outbound"
      @update="handleUpdate"
      @close="showCreate = false" />
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/17
 */
import { jxcSaleQueryRecordAPI } from '@/api/jxc/sale'
import { jxcOutboundSetStateByIdsAPI } from '@/api/jxc/outbound'

import TabTable from '../../../components/DetailTab/TabTable'
import CreateCom from '../../../components/Create/CreateCom'
import { isEmpty } from '@/utils/types'
import { mapGetters } from 'vuex'
import moment from 'moment'

export default {
  name: 'TabOutInfo',
  filters: {
    formatTime(date) {
      if (!date) return '--'
      return moment(date).format('YYYY-MM-DD')
    }
  },
  components: {
    TabTable,
    CreateCom,
    JXCFullScreenDetail: () => import('../../../components/JXCFullScreenDetail')
  },
  inheritAttrs: false,
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    detailData: {
      type: Object,
      required: true
    }
  },
  data() {
    const awaitFieldList = [
      { fieldName: 'productName', name: '产品名称' },
      { fieldName: 'spDataValue', name: '产品规格' },
      { fieldName: 'productCompany', name: '单位' },
      { fieldName: 'saleProductNumber', name: '出库数量' },
      { fieldName: 'yiSaleProductNumber', name: '已出库' },
      { fieldName: 'weiSaleProductNumber', name: '待出库' }
    ]

    const enterFieldList = [
      { fieldName: 'productName', name: '产品名称' },
      { fieldName: 'spDataValue', name: '产品规格' },
      { fieldName: 'productCompany', name: '单位' },
      { fieldName: 'outboundProductNumber', name: '本次出库' },
      { fieldName: 'remarks', name: '备注' }
    ]
    return {
      showAwaitTable: true,
      awaitRequestConfig: {
        fieldList: awaitFieldList,
        list: []
      },

      productData: [],
      enterFieldList: enterFieldList,

      deleteProductData: [],

      createConfig: {},
      showCreate: false,

      rowId: '',
      detailType: '',
      showDetail: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    outboundSaveAuth() {
      return this.jxc && this.jxc.outbound && this.jxc.outbound.save
    },
    outboundSetStateAuth() {
      return this.jxc && this.jxc.outbound && this.jxc.outbound.setState
    }
  },
  watch: {
    id: {
      handler(val) {
        if (val) {
          this.getData()
        }
      },
      immediate: true
    }
  },
  methods: {
    valueFormatter(row, column, cellValue, index) {
      return isEmpty(cellValue) ? '--' : cellValue
    },

    /**
     * 获取出库记录
     */
    getData() {
      jxcSaleQueryRecordAPI({
        orderId: this.id
      }).then(res => {
        console.log('jxcSaleQueryRecordAPI: ', res)
        this.awaitRequestConfig.list = res.data.weiList || []
        this.productData = res.data.yiList
        this.deleteProductData = res.data.feiList
      }).catch(() => {})
    },

    /**
     * 刷新table
     */
    handleUpdate() {
      this.showAwaitTable = false
      this.getData()
      this.$nextTick(() => {
        this.showAwaitTable = true
        this.$emit('update')
      })
    },

    /**
     * 作废出库单
     */
    handleInvalid(item) {
      this.$confirm(`确定要作废该出库单吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        jxcOutboundSetStateByIdsAPI({
          ids: item.outboundId
        }).then(() => {
          this.$message.success('作废成功')
          this.handleUpdate()
        }).catch(() => {})
      }).catch(() => {
        this.$message.info('已取消')
      })
    },

    /**
     * 查看出库单详情
     */
    handleShowOutDetail(item) {
      this.rowId = item.outboundId
      this.detailType = 'jxc_outbound'
      this.showDetail = true
    },

    /**
     * 创建出库单
     */
    handleToCreate() {
      this.createConfig = {
        defaultValue: {
          outboundType: '销售出库',
          orderId: {
            id: this.id,
            name: this.detailData.orderNumber
          }
        },
        disabledField: ['outboundType', 'orderId']
      }
      this.showCreate = true
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../../styles/tabEnterAndOut";
</style>
